{include file="public/header"}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>账号管理>新增</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <style>
        html,
        body {
            width: 100%;
            background: rgba(238, 238, 238, 1);
            margin:0;
            padding:0;
            word-wrap: break-word;
            word-break: break-all;
        }
        .container{
            padding-top:30px;
            padding-bottom:80px;
        }
        .box{
            width:1200px;
            height:800px;
            background:#fff;
            margin:auto;
            padding-top:68px;
            padding-bottom:80px;
            border-radius:3px;
        }

        .data{

            padding-left:114px;
        }

        .dataContent{

            display: flex;
            margin-bottom:56px;
        }
        .dataContent1{

            display: flex;
            align-items: center;
            margin-bottom:29px;
        }
        .dataLeft{
            font-size:14px;
            color:#333;
            font-weight:500;
            width:70px;
            margin-top:5px;
            text-align: right;
            margin-right:30px;
        }
        .dataLeft1{
            font-size:14px;
            color:#333;
            font-weight:500;
            text-align: right;
            width:70px;
            margin-right:30px;
        }
        .inputt{
            width:520px;
            height:34px;
            border:1px solid #ccc;
            border-radius:3px;
            box-sizing: border-box;
            padding-left:10px;
            outline:none;
        }
        .inputt::-webkit-input-placeholder{
            color:#999;
            font-size:12px;
        }

        .intro{
            width:520px;
            height:150px;
            border:1px solid #ccc;
            border-radius:3px;
            padding:28px;
            resize: none;
            box-sizing: border-box;
        }

        .txtt{
            font-size:12px;
            color:#666;
            margin-top:16px;
        }

        .btn{

            width:130px;
            height:34px;
            line-height:34px;
            background:#0065F0;
            border-radius:3px;
            margin-top:11px;
            text-align:center;
            font-size:12px;
            color:#fff;
            margin-left:214px;
            cursor:pointer;
        }

        .jianju{
            margin-bottom:60px;
        }
        textarea{
            resize:none;
            width:100%;
            height:100%;
            overflow-y: auto;
            font-size:14px;
            color:#333;
            border:0;
            outline: 0;
            word-wrap: break-word;
            word-break: break-all;
        }
        textarea::-webkit-input-placeholder{
            font-size:12px;
            color:#666;
        }
        .item4_middle {
            flex: 1;
            position: relative;
            display: flex;
        }
        .select {
            margin-right: 20px;
            width: 160px;
            height: 34px;
            border-radius: 3px;
            border: 1px solid #cccccc;
            display: flex;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 34px;
            color: #666666;
            font-size: 12px;
            position: relative;
        }
        .select .option {
            flex: 1;
            font-size:12px;
            color:#333;
        }
        .sanjiao_wrap {
            width: 32px;
            height: 32px;
            border-left: 1px solid #CCCCCC;
            /*border-radius:3px;*/
            position: absolute;
            right: 0;
            top: 0;
        }

        .sanjiao1 {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
        }

        .sanjiao2 {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%) rotate(180deg);
        }
    </style>
</head>

<body>
<header class="tt_topAll">
    <div class="tt_top3">
        <div class="tt_top33">账号管理>新增</div>
    </div>
</header>
<div class="container">
    <div class="box">
        <form id="fabutask">
            <input type="hidden"  name="id" value="{$id}">
            <div class="data">
                <div class="dataContent1">
                    <div class="dataLeft1">名称</div>
                    <input type="text" name="username" value="{$data['role_name']}" class="inputt username"  placeholder="请输入名称">
                </div>
                <div class="dataContent1">
                    <div class="dataLeft1">申请区域</div>
                    <div class="item4_middle">
                        <select name="role" id="" class="select">
                            {volist name="data1" id="vo"}
                            <option value="{$vo.role_id}" {if $vo.role_id = $data['f_id']} selectecd {/if}>{$vo['role_name']}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="dataContent1">
                    <div class="dataLeft1">账号</div>
                    <input type="text" name="account" value="{$data.role_user}" class="inputt account" onkeyup="this.value=this.value.replace(/\D/gi,'')" placeholder="只能输入手机号码">
                </div>
                <div class="dataContent1">
                    <div class="dataLeft1">密码</div>
                    <input type="text" name="password" value="{$data.password}" class="inputt password" placeholder="密码由6-20位数字/字母/常用符号组成">
                </div>
                <div class="dataContent">
                    <div class="dataLeft">备注</div>
                    <div class="intro">
                        <textarea name="intro">{$data.role_into}</textarea>
                    </div>
                </div>
            </div>
            <div class="btn">保存</div>
        </form>

    </div>
</div>

</body>
{include file="public/footer"}
<script type="text/javascript">
    $('.btn').click(function () {
        var name =   $.trim($(".username").val());
        if(name.length<1){
            alert("名称不能为空");
            return false;
        }
        var account =   $.trim($(".account").val());
        if(account.length<1){
            alert("账号不能为空");
            return false;
        }
        if(account.length){
            alert("手机号码有误，请重填");
            return false;
        }
        var password =   $.trim($(".password").val());
        var pattern = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
        if(!pattern.test(password)){
            alert("密码由6-20位数字/字母/常用符号组成");
            return false;
        }
        var formData = $( "#fabutask" ).serialize();
        $.ajax({
            url: '/shop/account/updateTask',
            data: formData,
            type: 'POST',
            dataType: 'JSON',
            success: function (eturnData) {
                if(eturnData.status == 200){
                    window.location.href = '/shop/account/rolePage';
                }else{
                    location.reload();
                }
            }
        })
    });
</script>

</html>
